<style scoped>
    .printDHL{ margin:0px !important; padding:0px !important; font-family:"粗体", Arial !important; font-size:12px !important; line-height: 1 !important;color: black !important;}
    .over-flow{overflow: auto; zoom: 1; }
    .left{width: 500px;height: 1000px; /*border: 1px dashed #000000;*/margin: auto;}
    .b{width: 55%;}
    .d{font-size: 9px;}
    .forms{width: 500px; border-bottom: 1px solid black;}
    .tos{width: 500px;height: 145px; border-bottom: 1px solid black;}
    .bfis{width: 500px; border-bottom: 1px solid black;}
    .times{width: 500px; border-bottom: 1px solid black;}
    .ref{width: 500px;border-bottom: 1px solid black;}
    .duct{width: 502px;border-bottom: 1px solid black;}
    .irny{width: 502px;border-bottom: 1px solid black;}
    .contents{width: 502px; margin-top: 20px;border-bottom: 1px solid black;}
    .contents{width: 500px; margin-top: 20px;}
    .right{color: #fff;height: 49px; /*background-image: url("../../images/black.png")*/}
    .row1{border-width: 2px 0 0 2px;top: -5;left: -5px;}
    .jiao{position: relative;margin: 10px;width: 480px;height: 135PX;}
    .row2{border-width: 2px 2px 0 0;top: -5px;right: -5px;}
    .col2{border-width: 0 0 2px 2px;bottom: -5px;left: -5px;}
    .col1{border-width: 0 2px 2px 0;bottom: -5px;right: -5px;}
</style>

<template>
    <div class="printDHL">
        <div align="center" class="noprint">
        <Button @click="print">打印</Button>
        </div>
        <div class="left overflow">
            <div style="height: 50px; width: 502px;border-bottom: 1px solid black;">
                <div class="b" style="float: left">
                    <div class="c" style="font-size: 20px;margin-left: 16px;font-weight: 600;text-align: center;">{{mainobj.oneObjName}}</div>

                    <p style="font-size: 15px; text-align: center;font-weight: 600;">{{mainobj.oneObjTime}}</p>
                </div>
                <div class="q" style="width: 45%;float: right;position: relative;">
                    <img src="../../images/black.png" style="height: 49px;width: 80px;">
                    <div class="right" style=" font-size: 35px; float: left;font-weight: 600;width: 80px;position: absolute;z-index: 2;top: 0px;">{{mainobj.oneObjType}}</div>
                </div>
            </div>
            <div class="forms over-flow" style="height: 85px;">
                <div class="form_left clearfix" style="width: 55%;float: left;word-wrap:break-word; ">
                    <div style="height: 100%;float: left;font-size: 10px;font-weight: 600;margin-left: 15px;">From:</div>
                    <span style="width: 80%;float: right;font-weight: 600;font-size: 14px;">{{mainobj.twoObjOne}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{mainobj.twoObjTwo}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{mainobj.twoObjThree}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{mainobj.twoObjFour}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{mainobj.twoObjFive}}</span>

                </div>
                <div class="form_right" style="width: 40%; float: right;">
                    <div style="float: right; width: 40%;height: 65px;">
                        <div style="font-size: 15px;font-weight: 600;">Origin:</div>
                        <span style="font-size: 25px;font-weight: 600;">{{mainobj.twoObjSeven}}</span>
                    </div>
                    <div style="width: 100%;float: left;font-weight: 600;font-size: 10px;">{{mainobj.twoObjSix}}</div>

                </div>
                <div class="form_left" style="float: right; width: 33%;font-size: 9px;">

                </div>
            </div>
            <div class="tos">
                <div class="jiao">
                    <div class="form_left" style="width: 80%;float: left;">
                        <span class="row row1" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <span class="row row2" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <span class="col col2" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <span class="col col1" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <div style="width:30px;height:55px;float: left;margin-top: 4px;font-size: 10px;font-weight: 600;margin-left: 15px;">To:</div>
                        <span style="width: 80%;float: left;font-weight: 600;font-size: 15px;">{{mainobj.threeObjOne}}</span>
                        <span style=" width: 80%;float: left;font-weight: 600;font-size: 15px;">{{mainobj.threeObjTwo}}</span>
                        <span style=" width: 80%;float: left;font-weight: 600;font-size: 15px;">{{mainobj.threeObjThree}}</span>
                        <span style=" width: 80%;float: left;font-weight: 600;font-size: 15px;">{{mainobj.threeObjFour}}</span>
                    </div>
                    <div class="form_right" style="width: 3%; float:left">
                        <div style="float: right; width: 40%;font-size: 10px;">
                            <div style="font-weight: 600;">Contact:</div>
                            <span style="font-size: 9px;font-weight: 600;">{{mainobj.threeObjSeven}}</span>
                        </div>
                    </div>
                    <div style="float: left;width: 65%; font-size: 25px;margin-left: 45px;">
                        <span style=" width: 80%;text-align: center;font-weight: 600;font-size: 20px;">{{mainobj.threeObjFive}}</span><br/>
                        <span style=" width: 80%;text-align: center;font-weight: 600;font-size: 20px;">{{mainobj.threeObjSix}}</span>
                    </div>
                </div>
            </div>
            <div class="bfis">
                <div style="text-align: center;font-size: 45px;margin: auto;height: 50px;font-weight: 600;"> <span style=" font-weight: 600;float: left;margin-left: 4px;">.</span>{{mainobj.fourObjOne}}<span style=" font-weight: 600;float: right;margin-right: 4px;">.</span></div>
            </div>
            <div class="duct over-flow"  style="height: 95px;">
                <div class="form_right" style="width: 50%; float: left;">
                    <div style="margin-left: 2px;">
                        <div style="font-size: 10px;font-weight: 600;margin-left: 15px;">Product:</div>
                        <span style="font-size: 15px;font-weight: 600;margin-left: 15px;">{{mainobj.fiveObjOne}}</span>
                    </div>
                    <div style=" margin-left: 2px;">
                        <div style="font-size: 10px;font-weight: 600;margin-left: 15px;">Payment code:</div>
                        <span style="font-size: 10px;font-weight: 600;margin-left: 15px;">{{mainobj.fiveObjTwo}}</span>
                    </div>
                    <div style="margin-left: 2px;">
                        <div style="font-size: 10px;font-weight: 600;margin-left: 15px;">Terms of Trade:</div>
                        <span style="font-size: 10px;font-weight: 600;margin-left: 15px;">{{mainobj.fiveObjThree}}</span>

                    </div>
                </div>
                <div class="form_right" style="width: 45%; float: right;">
                    <div style="float: left;">
                        <div style="font-size: 10px;font-weight: 600;">Feaures/Services:</div>
                        <span style="font-size: 10px;font-weight: 600;"></span>
                    </div>
                </div>
            </div>
            <div class="irny over-flow" style="height: 105px;">
                <div style="width: 40%; margin-left: 2px; float: left;">
                    <div style="width: 100%;height: 35px;">
                        <div style="font-size: 10px;font-weight: 600;margin-left: 15px;">{{mainobj.sixObjOne}}</div>
                    </div>
                    <div style="width: 100%;">
                        <div style="font-size: 10px;font-weight: 600;margin-left: 15px;">{{mainobj.sixObjTwo}}</div>
                    </div>
                    <div style="width: 100%;margin-top: 5px;">
                        <div style="font-size: 10px;font-weight: 600;margin-left: 15px;">{{mainobj.sixObjThree}}</div>
                    </div>
                </div>
                <div style="width: 35%;float: left">
                    <div style="width: 100%; text-align: right;">
                        <div style="font-size: 10px;font-weight: 600;">Shpt Wght:
                    <span style="font-size: 20px;font-weight: 600;">{{mainobj.sixObjFour}}</span>
                        </div>
                    </div>
                    <div style="width: 100%; text-align: right;margin-top: 10px;">
                        <div style="font-size: 10px;font-weight: 600;">Ship ment Date:
                    <span style="font-size: 10px;font-weight: 600;">{{mainobj.sixObjFive}}</span>
                        </div>
                    </div>
                </div>
                <div style="width: 24%;float: right;margin-right: 3px;">
                    <div style="width: 100%; text-align: right;">
                        <div style="font-size: 10px;font-weight: 600;margin-right: 15px;"># of Pieces</div>
                        <span style="font-size: 20px;font-weight: 600;margin-right: 15px;">{{mainobj.sixObjSix}}</span>
                    </div>
                </div>
            </div>
            <div class="contents over-flow" style="height: 175px;">
                <div style="">
                    <div class="waybill over-flow" style="text-align: center;height: 115px;word-wrap:break-word;float: left;margin-left: 10px;">
                        <div id="mainCode"></div>
                        <div style="font-weight: 600;">{{mainobj.sevenObjOnename}}</div>
                    </div>
                    <div class="congtents_z" style="width: 25%;height: 70px;text-align: center;float: right;font-size: 9px;">
                        <div style="font-weight: 600;font-size: 10px;">Contents:</div>
                        <span style="text-align: left;font-weight: 600;font-size: 10px;">Garent</span>
                    </div>
                </div>
            </div>
            <div class="plates">
                <div>
                    <span style="font-weight: 600;font-size: 10px;margin-left: 15px;">License  Plates of pieces in ship ment</span>
                </div>
                <div v-for="infor  in  mainobj.eightObjOne">
                    <span style="font-weight: 600;font-size: 10px;margin-left: 15px;;">{{infor}}</span>
                </div>
            </div>
        </div>
        <!-- 副打印页-->
        <div class="left" v-for="subobj in subarr">
            <div class="head over-flow" style="width: 502px;height:51px;border-bottom: 1px solid black;">
                <div class="b" style="float: left">
                    <div class="c" style="font-size: 20px;font-weight: 600;text-align: center;">{{subobj.oneObjName}}</div>

                    <span style="font-size: 10px;font-weight: 600; text-align: center; width: 70%;margin-left: 38px;">{{subobj.oneObjTime}}</span>
                </div>
                <div class="q" style="width: 45%;float: right;position: relative">
                    <img src="../../images/black.png" style="height: 50px;width: 80px;float: left;">
                    <div class="right" style=" font-size: 35px; float: left;font-weight: 600;width: 80px;position: absolute;z-index: 2;top: 0px;">{{subobj.oneObjType}}</div>
                </div>
            </div>
            <div class="forms over-flow" style="height: 85px;">
                <div class="form_left" style="width: 75%;float: left;">
                    <div style="height: 100%;float: left;font-size: 10px;font-weight: 600;margin-left: 15px;">From:</div>
                    <span style="width: 80%;float: right;font-weight: 600;font-size: 14px;">{{subobj.twoObjOne}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{subobj.twoObjTwo}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{subobj.twoObjThree}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{subobj.twoObjFour}}</span>
                    <span style=" width: 80%;float: right;font-weight: 600;font-size: 14px;">{{subobj.twoObjFive}}</span>

                </div>
                <div class="form_right" style="width: 24%;height: 45px; float: left;">
                    <div style="float: right; ">
                        <div style="font-size: 15px;font-weight: 600;">Origin:</div>
                        <span style="font-size: 25px;font-weight: 600;">{{subobj.twoObjSeven}}</span>
                    </div>

                </div>
                <div class="form_left" style="float: right; width: 33%;font-size: 10px;">
                    <div style="float: left;font-weight: 600;">{{subobj.twoObjSix}}</div>
                </div>

            </div>
            <div class="tos">
                <div class="jiao">
                    <div class="form_left" style="width: 72%;float: left;">
                        <span class="row row1" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <span class="row row2" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <span class="col col2" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <span class="col col1" style="position: absolute;padding: 5px;border-style: solid;border-color: black;"></span>
                        <div style="height: 100%;float: left;margin-top: 4px;font-size: 10px;font-weight: 600;margin-left: 15px;">To:</div>
                        <span style="width: 81%;float: right;font-weight: 600;font-size: 15px;">{{subobj.threeObjOne}}</span>
                        <span style=" width: 81%;float: right;font-weight: 600;font-size: 15px;">{{subobj.threeObjTwo}}</span>
                        <span style=" width: 81%;float: right;font-weight: 600;font-size: 15px;">{{subobj.threeObjThree}}</span>
                        <span style=" width: 81%;float: right;font-weight: 600;font-size: 15px;">{{subobj.threeObjFour}}</span>

                    </div>
                    <div class="form_right" style="width: 25%; float: right;">
                        <div style="float: left; width: 40%;margin-left: 45px;">
                            <div style="font-size: 9px;font-weight: 600;">Contact:</div>
                            <span style="font-size: 9px;font-weight: 600;">{{subobj.threeObjSeven}}</span>
                        </div>
                    </div>
                    <div style="float: left;width: 65%; font-size: 25px;margin-left: 65px;font-weight: 600;">
                        <span style=" width: 80%;text-align: center;font-weight: 600;font-size: 20px;">{{subobj.threeObjFive}}</span><br/>
                        <span style=" width: 80%;text-align: center;font-weight: 600;font-size: 20px;">{{subobj.threeObjSix}}</span>
                    </div>
                </div>
            </div>
            <div class="bfis">
                <div style="height:50px;text-align: center;font-size: 45px;margin: auto;font-size: 45px;font-weight: 600;"> <span style=" font-weight: 600;float: left;margin-left: 4px;">.</span>{{subobj.fourObjOne}}<span style=" font-weight: 600;float: right;margin-right: 4px;">.</span></div>
            </div>
            <div class="times" style="height: 40px;">
                <div style="width:60%;height: 40px; background: black; color: #FFF; font-size: 39px;float: left;position: relative">
                    <img src="../../images/longblack.png" style="height: 40px;float: left;">
                    <span style="font-weight: 600;left: 15px;position: absolute;z-index: 2;top: 0px;">{{subobj.fiveObjOne}}</span>
                </div>
                <div style="width: 20%;float: left;">
                    <span style="float: right;font-size:10px;font-weight: 600;">{{subobj.fiveObjTwo}}</span>
                </div>
                <div style="width: 20%;float: left;">
                    <span style="float: right;font-size:10px;font-weight: 600;margin-right: 15px;">{{subobj.fiveObjThree}}</span>
                </div>
            </div>
            <div class="ref over-flow" style="height:115px;">
                <div class="form_left" style="width: 45%;float: left;font-weight: 600;font-size: 15px;margin-left: 15px;">{{subobj.sixObjOne}}</div>
                <div class="form_right" style="width: 30%; float: left;">
                    <div style="float: left;font-size: 10px;">
                        <div style="font-weight: 600;font-size: 10px;">Poe/Shpt Waight</div>
                        <div style="font-size: 20px; text-align: center;font-weight: 600;"><span>{{subobj.sixObjTwo}}</span></div>
                    </div>
                </div>
                <div class="form_right" style="width: 20%; float: left;">
                    <div style="float: right;font-size: 10px;font-weight: 600;">
                        <div>Piece</div>
                        <div style="font-size: 20px; text-align: center;font-weight: 600;"><span>{{subobj.sixObjThree}}</span></div>
                    </div>
                </div>
            </div>
            <div class="contents" style="border-bottom: none;">
                <div class="">
                    <div style="margin-left: 25px;text-align: center;float: left;font-size: 10px;">
                        <div class="subCodeOne"></div>
                        <div style="font-weight: 600;font-size: 10px;margin-bottom: 30px;">{{subobj.sevenObjOnename}}</div>
                    </div>
                    <div class="congtents_z" style="text-align: center;float: right;font-size: 10px;margin-right: 15px;">
                        <div style="height: 100%;font-weight: 600;font-size: 10px;">Contents:<span style="font-weight: 600;">Garent</span>
                        </div>
                    </div>
                </div>

                <div style="" class="">
                    <div class="subCodeTwo" style="margin-left: 50px;" :data-id="subobj.sevenObjTwo"></div>
                    <div  style="text-align: center;font-weight: 600; margin-bottom: 30px;">{{subobj.sevenObjTwoname}}</div>
                    <div class="subCodeThree" style="margin-left: 50px;" :data-id="subobj.sevenObjThree"></div>
                    <div  style="text-align: center; font-weight: bolder">{{subobj.sevenObjThreename}}</div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mainobj : new Object(),
                subarr : []
            }
        },
        created: function () {
            $(".console-body").css({top:0});
            this.mainobj = JSON.parse(sessionStorage.getItem("mainobj"));
            this.subarr = JSON.parse(sessionStorage.getItem("subarr"));
        },

        mounted() {
            window.onresize = function(){
                $("#contcentHeight").css({height:(window.innerHeight - 174)+"px"});
                $("#rightWidth").css({width:(window.innerWidth - 180)+"px"});
            };
            $("#mainCode").barcode(this.mainobj.sevenObjOne, "code39", {
                barWidth :2,
                barHeight : 100,
                fontSize :8,
                showHRI : false,
            });
            $(".subCodeOne").barcode(this.subarr[0].sevenObjOne, "code39", {
                barWidth :2,
                barHeight : 50,
                fontSize :8,
                showHRI : false,
            });
            $(".subCodeTwo").barcode(this.subarr[0].sevenObjTwo, "code128", {
                barWidth :2,
                barHeight : 100,
                fontSize :8,
                showHRI : false,
            });
            $(".subCodeThree").each(function(i, v){
                this.setAttribute("id","subCodeThree_"+i);
                var code = this.getAttribute("data-id");
                $("#subCodeThree_"+i).barcode(code, "code128", {
                    barWidth :2,
                    barHeight : 100,
                    fontSize :8,
                    showHRI : false,
                });
            });
        },

        updated:function () {
        },
        methods: {
            print(){
                $(".noprint").hide();
                window.print();
                $(".noprint").show();
            },
        }

    }
</script>
